<template>
  <div>
    <el-button type="primary" size="small" @click="submit" :loading="btnLoading" v-hasPermi="['system:sett:do']">设为未结算</el-button>
    <el-table style="margin-top: 20px" :data="tableData" @selection-change="handleSelectionChange" v-loading="loading" row-key="orderId" ref="table">
      <el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column>
      <el-table-column v-if="!isClient" v-hasPermi="['pay:payOrder:trader']" label="所属商户" align="center">
        <template #default="{ row }">
          <div class="flex flex-col items-center leading-[1.1] justify-center">
            <el-link class="truncate overflow-hidden max-w-[100%]" :underline="false" v-if="isAdmin" @click="copyText(row.agentName, '代理名称')">{{
              row.agentName
            }}</el-link>
            <el-icon v-if="row.agentName && isAdmin"><ArrowDown /></el-icon>
            <el-link class="truncate overflow-hidden max-w-[100%]" :underline="false" @click="copyText(row.clientName, '商户名称')">{{
              row.clientName
            }}</el-link>
            <el-icon v-if="row.clientName"><ArrowDown /></el-icon>
            <el-link class="truncate overflow-hidden max-w-[100%]" :underline="false" @click="copyText(row.appId, '应用ID')">{{ row.appId }}</el-link>
          </div>
        </template>
      </el-table-column>

      <el-table-column v-else label="APP ID" align="center">
        <template #default="{ row }">
          <div class="flex flex-col items-center leading-[0.8] justify-center">
            <el-link class="truncate overflow-hidden max-w-[100%]" :underline="false" @click="copyText(row.appId, '应用ID')">{{ row.appId }}</el-link>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="A订单号" prop="orderAid"></el-table-column>
      <el-table-column label="B订单号" prop="orderNo"></el-table-column>
      <el-table-column label="平台订单号" prop="orderCid"></el-table-column>
      <el-table-column label="更新时间" prop="updateTime"></el-table-column>
      <el-table-column label="创建时间" prop="createTime"></el-table-column>
      <el-table-column label="订单总金额" align="center" prop="orderMoney" width="100">
        <template #default="scope">
          <span>{{ scope.row.currency }} {{ scope.row.orderMoney }}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单美元金额" align="center" prop="usdMoney" width="140" />
    </el-table>
    <el-pagination background layout="prev, pager, next,total" @current-change="onCurrentChange" :total="total" :current-page="pageNum">
    </el-pagination>
  </div>
</template>

<script>
import { getUnSettList, setUnSett } from '@/api/pay/PaySettlement.js';
import { copyTextToClipboard } from '@/directive/common/copyText';
import useUserStore from '@/store/modules/user';
export default {
  props: {
    queryParams: {
      type: Object,
      default: () => {}
    },
    monthQuery: {
      type: String,
      default: ''
    },
    activeName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      tableData: [],
      selectList: [],
      total: 0,
      pageNum: 1,
      pageSize: 10,
      loading: false,
      lazyData: true,
      btnLoading: false
    };
  },
  watch: {
    // 监听父组件查询参数
    queryParams: {
      handler: function () {
        this.pageNum = 1;
        this.getTableData();
      },
      deep: true
    }
  },
  computed: {
    params() {
      let opt = {
        sett: 1,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      };
      Object.assign(opt, this.queryParams);
      return opt;
    },
    isClient() {
      const { isClient } = useUserStore();
      return isClient;
    },
    isAdmin() {
      const { isAdmin } = useUserStore();
      return isAdmin;
    }
  },
  mounted() {
    this.getTableData();
  },
  methods: {
    // 复制成功
    copyText(str, msg) {
      if (!str) return;
      let newStr = str + '';
      let res = copyTextToClipboard(newStr);
      if (res) {
        ElMessage.success(msg + '复制成功');
      }
    },
    async getTableData() {
      if (!this.params.dateList.length) {
        this.tableData = [];
        return;
      }
      this.loading = true;
      // 没有选中天数不请求
      let res = await getUnSettList(this.params);
      this.tableData = res.rows;
      this.total = res.total;
      this.loading = false;
    },
    handleSelectionChange(val) {
      this.selectList = val;
    },
    submit() {
      if (!this.selectList.length) {
        return ElMessage.error('请选择订单');
      }
      this.btnLoading = true;
      let list = this.selectList.map((item) => item.orderId);
      let opt = {
        payTypeId: this.params.payTypeId,
        orderIds: list
      };
      setUnSett(opt)
        .then(() => {
          this.btnLoading = false;
          ElMessage.success('设置成功');
          this.selectList = [];
          this.$refs.table.clearSelection();
          setTimeout(() => {
            this.getTableData();
            this.$emit('changeSuccess');
          }, 1000);
        })
        .catch(() => {
          this.btnLoading = false;
        });
    },
    onCurrentChange(val) {
      this.pageNum = val;
      this.getTableData();
    }
  }
};
</script>

<style></style>
